<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp" %>
<!DOCTYPE HTML>
<html ng-app>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <title>${title}</title>
    <%@ include file="/WEB-INF/jsp/commons/meta.jsp" %>
    <link href="${ctx}/resources/new/style.css" type="text/css" rel="stylesheet"/>

</head>
<body>
<!-- 分页显示演示开始 -->
<script>

</script>
<style>
    <!--
    .tab {
        margin-bottom: 0px;
        margin-top: 6px;
    }

    .tab > li > a {
        line-height: 22px;
        padding-bottom: 2px;
        padding-top: 2px;
    }

    .tab-content {
        border: 1px solid #E3E3E3;
        border-radius: 0px 0px 4px 4px;
        border-top: none;
        padding: 2px;
    }

    .table [valign="top"] {
        vertical-align: top;
    }

    #batch div[id^=m] {
        background-color: #FFFFFF;
        border: 1px solid #E3E3E3;
        border-radius: 4px;
        margin: 2px;
        padding: 2px;
        line-height: 25px;
        float: left;
        width: 45%;
        min-height: 225px;
    }

    #batch div[id^=m] span {
        float: left;
    }

    .title {
        width: 60px;
        margin-left: 20px;
    }

    #batch #mGoods {
        width: 98%;
        min-height: 25px;
        max-height: 200px;
        overflow-y: auto;
        padding: 5px;
    }

    #goodsQr {
        min-height: 40px;
        width: 80%;
    }

    #memo {
        width: 99%;
    }

    -->
</style>
<ul class="nav nav-tabs tab tBlock">
    <li class="active">
        <a deny="not" class="nFocus" href="#batch" data-toggle="tab">
            <i class="icon-tags"></i>
            商品批量入库
        </a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="batch">
        <form id="inputForm" class="well form-inline" action="${ctx}/adoms/goods/batchIn" method="post">
            <table class="table table-striped table-bordered table-condensed">
                <tr>
                    <td class="span2" valign="top">
                        商品二维码:
                        <br/>
                        <span class="tBlue">(扫描输入一个二维码)</span>
                    </td>
                    <td>
                        <input type="text" name="goodsQr" id="goodsQr" class="span6"/>
                        <span id="clearBtn" class="btn btn-small btn-primary">清 空</span>
                    </td>
                </tr>
                <tr>
                    <td class="span2">待入库货物列表:</td>
                    <td>
                        <div id="mGoods" class="tBlue">
                            <div id="qrBar"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="span2">请选择商品:</td>
                    <td>
                        <select id="marchandise" name="marchandise.id">
                            <c:forEach items="${mList }" var="m" varStatus="index">
                                <option value="${m.id }">${index.index + 1}.${m.name }</option>
                            </c:forEach>
                        </select>
                        已成功扫描:
                        <span class="tRed" id="counter">0</span>
                        条记录
                    </td>
                </tr>
                <tr>
                    <td class="span2" valign="top">商品详情:</td>
                    <td>
                        <c:forEach items="${mList }" var="m">
                            <div class="hide" id="m${m.id }">
                                <span class="title">商品名称：</span>
                                <span class="span3">${m.name }</span>
                                <br/>
                                <span class="title">商品编号：</span>
                                <span class="span3">${m.code }</span>
                                <br/>
                                <span class="title">单价：</span>
                                <span class="span3 tBlue">￥${m.price } 元</span>
                                <br/>
                                <span class="title">规格：</span>
                                <span class="span3 tBlue">${m.spcification }</span>
                                <br/>
                                <span class="title">包装：</span>
                                <span class="span3 tBlue">${m.packageing }</span>
                                <br/>
                                <span class="title">商品条码：</span>
                                <span class="span3">${m.barCode }</span>
                                <br/>
                                <span class="title">品牌：</span>
                                <span class="span3">${m.brand.name }</span>
                                <br/>
                                <span class="title">产地：</span>
                                <span class="span3">${m.producePlace }</span>
                                <br/>
                                <span class="title">生产日期：</span>
                                <span class="span3">${m.produceDate }</span>
                                <br/>
                                <span class="title">保质期：</span>
                                <span class="span3">${m.shelflife }</span>
                                <br/>
                                <span class="title">商品描述：</span>
                                <span class="span3">${m.description }</span>
                                <br/>
                            </div>
                        </c:forEach>
                    </td>
                </tr>
                <tr>
                    <td>所属部门:</td>
                    <td>
                        <select id="department" name="department.id">
                            <option value="${USER.department.id}">${USER.department.name}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>状态:</td>
                    <td>
                        <input id="state" name="state" type="hidden" value="待售" size="30" maxlength="80"/>
                        <span class="tBlue">待售</span>
                    </td>
                </tr>
                <tr>
                    <td>备注:</td>
                    <td>
                        <textarea id="memo" name="memo" rows="4" class="span6"></textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input class="btn span2 btn-primary" disabled="disabled" type="button" id="inSubmit"
                               value="批量入库"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script>
    $(function () {
        $("#inputForm").validate({
            rules: {
                "marchandise.id": "required",
                "department.id": "required",
                "qrCode.id": "required",
                memo: "required"
            }
        });
        $("#marchandise").change(function () {
            $("div[id^=m]:not([id^=mG])").hide();
            var mid = $(this).val();
            $("#m" + mid).show();
        }).change();
        $("#inSubmit").click(function () {
            $("#inputForm").submit();
        });
        $("#goodsQr").on("keyup blur", function (e) {
            var keyCode = e.keyCode;
            if (!keyCode || keyCode == 13) {
                var val = $.trim($("#goodsQr").val());
                var html = $("#qrBar").html();
                if (html.indexOf("(" + val + ")") < 0) {
                    if (val) {
                        $.post("${ctx}/adoms/qrGoodsCode/getGoodsByGCode", {
                            qrCode: val
                        }, function (data) {
                            var flag = "<span style='color:red;'>(" + val + ") - 无效</span>";
                            if (data) {
                                var counter = parseInt($("#counter").html()) + 1;
                                $("#counter").html(counter);
                                flag = "No." + counter + " - " + data.wCode + " - (" + val + ") - 有效<input type='hidden' name='qrid' value='" + data.id + "'/>";
                                $("#inSubmit").removeAttr("disabled");
                            }
                            $("#qrBar").prepend(flag + "<br/>");
                            $("#mGoods").show();
                            $("#goodsQr").val("").focus();
                        }, "json");
                    }
                } else {
                    msgAlert.show(val + " 已经存在！");
                    $(this).val("").focus();
                }
            }
            return false;
        });
        $("#clearBtn").click(function () {
            $("#goodsQr").val("");
            $("#qrBar").html("");
            $("#inSubmit").attr("disabled", "disabled");
            $("#counter").html(0); //计数器
        });
    });
</script>
<c:if test="${msg != null}">
    <script>
        $(function () {
            msgAlert.show("${msg}");
        });
    </script>
</c:if></body>
</html>